<template>
  <div class="list-container">
    <div v-for="user in users" :key="user.user_name" class="list-item">
      <img v-if="user.head" :src="user.head" alt="用户头像" class="avatar" />
      <img v-else :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="默认头像" class="avatar" />
      <div class="info">
        <div class="name">{{ user.nickname }}</div>
        <div class="description">简介:{{ user.background }}</div>
      </div>
      <div class="actions">
        <el-dropdown v-if="user.following">
          <el-button type="success" @click="toggleFollow(user)">
            已关注
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <el-button text plain @click="toggleFollow(user)">取消关注</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button text plain @click="goToHomepage(user.user_name)">前往主页</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button  v-else type="success" plain @click="toggleFollow(user)">关注</el-button>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import {dis_guan} from'@/apis/guan.js'
import {useRouter} from 'vue-router'
const { proxy } = getCurrentInstance();
const users = ref([]);
const router=useRouter()
const fetchUsers = async () => {
    await proxy.$http.post('/get_guan/').then(
      (response)=>{
        users.value = response.data.fans.map(user => ({
        ...user,
        following: true, // 默认设置为 true
        }));
      }
    ).catch(err=>{
      ElMessage.error(err)
    }); 
};
const goToHomepage = (userName) => {
  router.push(`/home/WriterCenter/${userName}`);
};

const toggleFollow = async (user) => {
  if(user.following){
    const response = await proxy.$http.post("/no_loved/", {
      user_name: user.user_name,
    });
    const res = response.data;
    console.log(res);
    if (res.status === "success") {
      ElMessage.success("取消关注成功");
      user.following=!user.following
    } else {
      ElMessage.error("取消关注失败");
    }
  }else{
    const response = await proxy.$http.post("/loved/", {
      user_name : user.user_name,
    });
    const res = response.data;
    console.log(res);
    if(res.status === "success"){
      ElMessage.success("关注成功");
      user.following=!user.following
    }
    else{
      ElMessage.error("关注失败");
    }
  }
};

onMounted(() => {
  fetchUsers();
});
</script>

<style scoped>
.list-container {
  width: 100%;
  max-height: 350px;
  overflow-y: auto;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.list-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
}

.info {
  flex-grow: 1;
}

.name {
  font-size: 16px;
  font-weight: bold;
}

.description {
  font-size: 14px;
  color: #888;
}

.actions {
  display: flex;
  align-items: center;
}

.actions .el-button {
  margin-left: 10px;
}
</style>